<template>
	<view class="order-card" @click="handleDetails">
		<view v-if="!isCustomer" class="order-card-header">
			<view class="title">
				探店时间：{{ list.finalExploreTime ? list.finalExploreTime.replace(/-/g, '/') : '' }}
				{{ list.finalExploreTimeScope ? list.finalExploreTimeScope : '' }}
			</view>
			<view :class="list.probeStatus === 22 ? 'status status-succeed' : 'status'">{{ list.probeStatusStr }}</view>
		</view>
		<view :class="isCustomer ? 'order-card-body pt-16' : 'order-card-body'">
			<view class="product">
				<image :src="list.faceImg" mode="aspectFill" class="img"></image>
				<view class="product-info">
					<view class="name">
						{{ list.productName }}
					</view>
					<view class="tag">
						<view class="tag-item">探店人数：{{ list.explorePeople }}人</view>
					</view>
				</view>
			</view>
			<view
				v-if="IMG_URL"
				class="map"
				:style="{ backgroundImage: `url(${IMG_URL}order/img_order_position.png)` }"
				@click.stop="handleOpenLocation(list)"
			>
				<view class="map-info">
					<view class="title">
						<image src="/static/images/order/icon_order_position.png" class="map-icon"></image>
						<text>探店地址：{{ list.exploreStore }}</text>
					</view>
					<view class="address">
						{{ list.exploreStoreAddress }}
					</view>
				</view>
				<image src="/static/images/order/icon_order_right.png" class="icon"></image>
			</view>
			<view class="price">
				<text class="num">{{ list.finalPriceYuan }}</text>
				<text class="unit">元</text>
				+
				<text class="num">{{ list.commissionYuan }}</text>
				<text class="unit">元/单</text>
			</view>
		</view>
		<view v-if="!isCustomer && isShow" class="order-card-footer">
			<slot name="footer"></slot>
		</view>
		<view v-if="isCustomer" class="order-card-footer__customer">
			<button class="but" @click.stop="handleContact">
				<image src="/static/images/order/icon_dd_lxsj.png" class="icon"></image>
				联系客服
			</button>
		</view>
		<!-- 客户咨询 -->
		<DistributionService v-model="isPopup" />
	</view>
</template>
<script>
import { defaultImageUrl } from '@/utils';
import DistributionService from '@/components/distributionService';

export default {
	name: 'order-item',
	props: {
		isCustomer: {
			typeof: Boolean,
			default: false
		},
		list: {
			typeof: Object,
			default: {}
		}
	},
	data() {
		return {
			isPopup: false
		};
	},
	computed: {
		isShow() {
			// 审批中
			if (this.list.probeStatus === 10 && this.list.finalPriceStatus === 2) {
				return true;
			}
			return [11, 23].indexOf(this.list.probeStatus) > -1 ? true : false;
		},
		IMG_URL() {
			return defaultImageUrl;
		}
	},
	components: {
		DistributionService
	},
	methods: {
		handleContact() {
			// 联系客服
			this.isPopup = true;
		},
		handleOpenLocation(list) {
			// 查看地图
			uni.openLocation({
				latitude: Number(list.latitude),
				longitude: Number(list.longitude),
				name: list.exploreStore,
				address: list.exploreStoreAddress,
				success: () => {
					console.log('success');
				},
				fail: (e) => {
					console.log(e);
				}
			});
		},
		handleDetails() {
			// 查看详情
			if (this.isCustomer) {
				return;
			}
			this.$emit('click');
		}
	}
};
</script>

<style lang="scss" scoped>
@import '@/style/common.scss';

.order-card {
	background: #ffffff;
	border-radius: 24rpx;
	overflow: hidden;
	&-header {
		height: 88rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 0 16rpx;
		.title {
			color: #333333;
			font-weight: 500;
			font-size: 28rpx;
		}
		.status {
			font-size: 28rpx;
			color: #ff6b11;
			font-weight: 500;
		}
		.status-succeed {
			color: #57ae59;
		}
	}
	&-body {
		padding: 0 16rpx;
		.product {
			display: flex;
			.img {
				width: 160rpx;
				height: 160rpx;
				border-radius: 16rpx;
				margin-right: 20rpx;
			}
			.product-info {
				flex: 1;
				.name {
					height: 80rpx;
					color: #333333;
					font-size: 28rpx;
					overflow: hidden;
					text-overflow: ellipsis;
					display: -webkit-box;
					-webkit-line-clamp: 2;
					-webkit-box-orient: vertical;
				}
				.tag {
					margin-top: 24rpx;
					&-item {
						height: 48rpx;
						line-height: 48rpx;
						display: inline-block;
						font-size: 24rpx;
						padding: 0 20rpx;
						background: #fff0e7;
						border-radius: 12rpx;
						color: #ff6b11;
					}
				}
			}
		}
		.map {
			height: 150rpx;
			margin-top: 28rpx;
			background-repeat: no-repeat;
			background-size: 100% 100%;
			border-radius: 24rpx;
			padding: 20rpx 32rpx 20rpx 24rpx;
			box-sizing: border-box;
			display: flex;
			align-items: center;
			.map-info {
				flex: 1;
				.title {
					font-size: 24rpx;
					color: #333333;
					font-weight: bold;
					display: inline-flex;
					align-items: center;
					.map-icon {
						width: 28rpx;
						height: 28rpx;
						margin-right: 2rpx;
					}
				}
				.address {
					font-size: 22rpx;
					color: #666666;
					overflow: hidden;
					text-overflow: ellipsis;
					display: -webkit-box;
					-webkit-line-clamp: 2;
					-webkit-box-orient: vertical;
					margin-top: 12rpx;
				}
			}
			.icon {
				width: 32rpx;
				height: 32rpx;
				display: inline-flex;
				margin-left: 68rpx;
			}
		}
		.price {
			height: 94rpx;
			line-height: 94rpx;
			text-align: right;
			font-size: 40rpx;
			font-weight: bold;
			color: $moneyColor;
			.num {
				font-family: font-number;
			}
			.unit {
				font-size: 24rpx;
				margin-left: 4rpx;
			}
		}
	}
	&-footer {
		padding: 0 16rpx;
		&__body {
			height: 102rpx;
			border-top: 2rpx solid #eeeeee;
			box-sizing: border-box;
			display: flex;
			align-items: center;
			justify-content: space-between;
			.text {
				font-size: 24rpx;
				color: #333333;
			}
			.but-item {
				min-width: 176rpx;
				height: 64rpx;
				display: inline-flex;
				align-items: center;
				justify-content: center;
				border-radius: 32rpx;
				background: #ff6b11;
				color: #ffffff;
				padding: 0 32rpx;
				font-size: 28rpx;
				font-weight: 500;
			}
			.but-item-border {
				min-width: 176rpx;
				height: 64rpx;
				display: inline-flex;
				align-items: center;
				justify-content: center;
				border-radius: 32rpx;
				border: 2rpx solid #ff6b11;
				color: #ff6b11;
				padding: 0 32rpx;
				font-size: 28rpx;
				font-weight: 500;
			}
		}
	}
	&-footer__customer {
		.but {
			height: 90rpx;
			background: #ffffff;
			border-radius: 0;
			font-size: 28rpx;
			color: #1f1f1f;
			display: flex;
			align-items: center;
			justify-content: center;
			border-top: 2rpx solid #f6f6f6;
			&::after {
				border: none;
			}
			.icon {
				width: 40rpx;
				height: 40rpx;
				margin-right: 16rpx;
			}
		}
	}
}

.pt-16 {
	padding-top: 16rpx;
}
</style>
